<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
</head>

<body>
  <div id="map"></div>

  <script type="text/javascript">
    //地图中心点
    var center = ol.proj.transform([110.06667, 14.66667], 'EPSG:4326', 'EPSG:3857');


    function flayer() {


      var point=new ol.geom.Point(ol.proj.fromLonLat([120.264738,30.164879], 'EPSG:4326'));
      //var point=new ol.geom.Point([120.264738,30.164879])
      var feature = new ol.Feature({
            geometry: point
        })

      // var feature = new ol.Feature({
      //   geometry: new ol.geom.Point(point),
      //   name: 'Null Island',
      //   population: 4000,
      //   rainfall: 500
      // });


      var fill = new ol.style.Fill({
        color: 'rgba(255,0,0,0.8)'
      });
      var stroke = new ol.style.Stroke({
        color: '#3399CC',
        width: 1.25
      });


      var styles=  new ol.style.Style({
            image: new ol.style.Circle({
                color: '#ff0000',
                radius: 9,
                fill: new ol.style.Fill({
                    color: 'red'
                }),
               stroke:new ol.style.Stroke({color:'orange',width:1})
            })
            })



      feature.setStyle(styles);

      var vectorSource = new ol.source.Vector({
        features: [feature]
        
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      return vectorLayer;

    }



    //地图视图
    var view;
    var rootLayer;
    //
    rootLayer = new ol.layer.Tile({
      source: new ol.source.TileImage({
        url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
      }) //加载谷歌影像地图
    });


    var rootLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
      })
    });
	

	var lable = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "http://mt3.google.cn/vt/lyrs=h&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
      })
    });


    // //创建地图
    var map = new ol.Map({
      layers: [rootLayer, lable,flayer()],
      target: 'map',
      view: new ol.View({
        projection: "EPSG:4326",
        center: [120.220, 30.1735],
        zoom: 12,
      }),
    });


  </script>


</body>

</html>